<script setup>
import { ref } from "vue";
import { useComplainStatus, useRoleStatus } from "@/hooks/index.js";

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  communityList: {
    type: Array,
    default: () => ({}),
  },
});

// 是否支持多选
const useMultiStatus = () => {
  return [
    {
      label: "不支持",
      value: 0,
    },
    {
      label: "支持",
      value: 1,
    },
  ];
};

const anonymousList = useComplainStatus();
const multiList = useMultiStatus();
const statusList = useRoleStatus();

// 处理时间
// const time1 = ref("");
// const time2 = ref("");

// const changeStartTime = (val) => {
//   console.log(val);
//   props.formData.start_time = +new Date(val);
// };

// const changeEndTime = (val) => {
//   console.log(val);
//   props.formData.end_time = +new Date(val);
// };
</script>
<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="所属小区" prop="community_code">
        <el-select
          v-model="formData.community_code"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in communityList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="投票标题" label-width="150px" prop="title">
        <el-input v-model="formData.title" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="开始时间" prop="start_time">
        <el-date-picker
          v-model="formData.start_time"
          type="datetime"
          placeholder="请选择"
        />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="结束时间" prop="end_time">
        <el-date-picker
          v-model="formData.end_time"
          type="datetime"
          placeholder="请选择"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="是否支持多选" prop="multi">
        <el-radio-group v-model="formData.multi" class="ml-4">
          <el-radio
            v-for="item in multiList"
            :label="item.value"
            size="large"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="是否匿名" prop="anonymous">
        <el-radio-group v-model="formData.anonymous" class="ml-4">
          <el-radio v-for="item in anonymousList" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item label="状态" prop="status">
    <el-radio-group v-model="formData.status" class="ml-4">
      <el-radio v-for="item in statusList" :label="item.value" size="large">{{
        item.label
      }}</el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<style lang="scss" scoped></style>
